<template>
  <div class="main">
    <div class="inner">
      <div class="tabs">
<!--        <a href="javascript:;" data-index="0" class="active">大用户表</a>-->
<!--        <a href="javascript:;" data-index="1">最新预警数据</a>-->
        <span class="active">实时预警</span>
        <span :class="activeIndex === 1 ? 'active-type' : ''" @click="changeTab(1)">大用户表</span>
        <span :class="activeIndex === 0 ? 'active-type' : ''" @click="changeTab(0)">户表</span>
      </div>
      <div class="content">
        <el-row class="head">
          <el-col :span="8" style="text-align: center">设备编号</el-col>
<!--          <el-col :span="4" style="text-align: center">报警状态</el-col>-->
          <el-col :span="10" style="text-align: center">报警类型</el-col>
          <el-col :span="6" style="text-align: center">报警时间</el-col>
        </el-row>
        <vueSeamlessScroll ref="dbScroll" :class-option='defaultOptionDb' :data="dataListDb" class="marquee-view" v-if="activeIndex === 1">
          <el-row class="row" v-for="item in dataListDb" v-show="activeIndex === 1">
            <el-col :span="8" class="content_c">
              <el-tooltip effect="dark" :content="item.terminalId" placement="top">
                <span class="content-item_name">{{item.terminalId == null ? 'null' : item.terminalId}}</span>
              </el-tooltip>
            </el-col>
            <el-col :span="10" class="content_c" >
              <dict-tag :options="dict.type.warn_param_type" :value="item.warnParamType"/>
            </el-col>
            <el-col :span="6" class="content_c" >
              <el-tooltip class="item" effect="dark" :content="parseTime(item.startTime, '{y}-{m}-{d}')" placement="top">
                <span>{{ parseTime(item.startTime, '{y}-{m}-{d}') }}</span>
              </el-tooltip>
            </el-col>
          </el-row>
        </vueSeamlessScroll>
        <vueSeamlessScroll ref="xbScroll" :class-option='defaultOptionXb' :data="dataListXb" class="marquee-view" v-if="activeIndex === 0">
          <el-row class="row" v-for="item in dataListXb">
            <el-col :span="8" class="content_c">
              <el-tooltip effect="dark" :content="item.terminalId" placement="top">
                <span class="content-item_name">{{item.terminalId == null ? 'null' : item.terminalId}}</span>
              </el-tooltip>
            </el-col>
            <el-col :span="10" class="content_c" >
              <dict-tag :options="dict.type.warn_param_type" :value="item.warnParamType"/>
            </el-col>
            <el-col :span="6" class="content_c" >
              <el-tooltip class="item" effect="dark" :content="parseTime(item.startTime, '{y}-{m}-{d}')" placement="top">
                <span>{{ parseTime(item.startTime, '{y}-{m}-{d}') }}</span>
              </el-tooltip>
            </el-col>
          </el-row>
        </vueSeamlessScroll>
      </div>
    </div>
  </div>
</template>
<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
import {listDbWarn} from "@/api/alarm/alarmall";
import {listxbWarn} from "../../../api/alarm/alarmall";
// import
export  default {
  name: 'NewAlarmDb',
  dicts: ['warn_status','warn_handle_status','warn_param_type'],
  components: {vueSeamlessScroll},
  data() {
    return {
      dataListDb: [],
      activeIndex: 1,
      dataListXb: [],
    }
  },
  mounted() {
    this.timeFun()
    this.getList()
  },
  methods: {
    getList() {
      // let _this = this
      let queryParamsDb = {
        pageSize: 20,
        pageNum: 1,
        orderByColumns: 'startTime',
        isAsc:'descending',
        targetType: 1,
        // beginStarTime:'2024-07-13',
        // endStarTime:'2024-07-19'
      }
      listDbWarn(queryParamsDb).then(response => {
        if(response.code === 200) {
          this.dataListDb = response.rows
        }
      })
      let queryParamsXb = {
        pageSize: 20,
        pageNum: 1,
        orderByColumns: 'startTime',
        isAsc:'descending',
        targetType: 2,
      }
      listxbWarn(queryParamsXb).then(response => {
        if(response.code === 200) {
          this.dataListXb = response.rows
          // this.$nextTick(() => {
          //   console.log(this.$refs.xbScroll,"this.$refs.xbScroll")
          //   // this.$refs.xbScroll.refresh(); // 刷新 vueSeamlessScroll
          // });
        }
      })
    },
    changeTab(index) {
      this.setActiveItem(index)
    },
    // 设置当前展示的图表
    setActiveItem(index) {
      this.activeIndex = index
    },
    // 定时器 控制展示的是大用户表内容还是户表内容
    timeFun() {
      let timer = null
      timer = setInterval(() => {
        if (this.activeIndex >= 1) {
          this.activeIndex = 0
        } else {
          this.activeIndex++
        }
      }, 20000)
      // this.$once('hook:beforeDestroy', () => {
      //   clearInterval(timer);
      // });
    }
  },
  computed: {
    defaultOptionDb () {
      return {
        step: 0.4, // 数值越大速度滚动越快
        limitMoveNum: 8,
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动)direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    },
    defaultOptionXb () {
      return {
        step: 0.4, // 数值越大速度滚动越快
        limitMoveNum: 8,
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动)direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  },
}
</script>
<style lang="scss" scoped>
.main{
  height: 100%;
  cursor: pointer;
}
.inner{
  display: flex;
  flex-direction: column;
  .tabs{
    height: 6vh;
    line-height: 6vh;
    padding-left: .2rem;
    span{
      color: #00d8ff;
      font-size: .2rem;
      font-weight: 520;
      padding: 0 .1rem;
      font-family: "Adobe 仿宋 Std R";
    }
    span:first-child{
      border-right: 0.01rem solid #1950c4;
      padding-left: 0;
    }
    span.active{
      color: #fff;
    }
    .active-type {
      font-size: .18rem;
      margin: .1rem;
      padding: .05rem .05rem;
      background: #3aa0e5;
      color: white;
      border-radius: 5px;
    }
  }
}
.content{
  flex: 1;
  display: block;
  position: relative;
  height: 23.5vh;
  //margin: 0;
  //background: yellowgreen;
  .head{
    background: rgba(255, 255, 255, 0.1);
    font-size: 0.15rem;
    width: 100%;
    margin: 0 auto;
    //padding: 0.1rem 0;
    color: #68d8fe;
    display: flex;
    justify-content: space-between;
    line-height:4vh;
  }
  .marquee-view{
    position: absolute;
    top: 4vh;
    width: 100%;
    //background: #00afff;
    height: 20vh;
    overflow: hidden;
    //padding: 0 .1rem;
    .row{
      line-height: 2vh;
      padding: 0.1rem 0;
      //color: #00ffff;
      font-size: 0.15rem;
      display: flex;
      justify-content: space-between;
      text-align: center;
      font-family: "Adobe 仿宋 Std R";
    }
    .row:hover{
      color:#68d8ff;
      background: rgba(255, 255, 255, 0.1);
    }
    .row:hover .icon-dot{
      opacity: 1;
    }
    ::v-deep .el-tag{
      height: .24rem;
      line-height: .22rem;
      font-size: .15rem;
      background: transparent;
      border: none;
      color: #00ffff;
    }
    .content_c:hover{
      color: #68d8ff;
    }
    ::v-deep .el-tag:hover{
      color: #68d8ff;
    }
  }
}
/* 调用动画 */
/* //infinite永久调用动画 */
//.main .marquee-view .marquee {
//  animation: row  10s linear infinite;
//}
/*鼠标划入 停止动画  */
//.main .marquee-view .marquee:hover {
//  animation-play-state: paused;
//}
/* ------------------------------------------------------------动画 */
@keyframes row{
  0%{}
  100%{
    transform: translateY(-50%);
  }
}




</style>
